<template>
  <div>
    <el-dialog
      :title="title"
      v-model="entrustVisible"
      width="480px"
      top="20vh"
      @close="handleclose"
    >
      <el-form>
        <!-- label="选择碳票"  -->
        <el-form-item :required="true">
          <div class="sub-title my-2 text-sm text-gray-600">
            <span class="fontSize20">*碳排放量</span>
            <!-- <span class="describe_name">含手续费（吨）</span> -->
          </div>
          <el-input
            placeholder="请输入碳排放量"
            v-model="add_from.carbonAmount"
            type="number"
            @blur="handleAountBlur"
          >
          </el-input>
          <div class="describe_name" style="color: #01957d; margin-top: 10px">
            可交易碳量：{{ usableCarbon }}吨
          </div>
          <div class="btn_b">
            <el-button @click="entrustVisible = false" class="icon-search1"
              >取消</el-button
            >
            <el-button
              type="primary"
              class="icon-search"
              @click="handleSaveEntrust"
              >确定</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
  setup(props, context) {
    const add_from = reactive({
      carbonAmount: "",
    });
    const entrustVisible = ref(context.attrs.entrustVisible);
    const usableCarbon = ref(context.attrs.usableCarbon);
    const title = ref(context.attrs.title);
    const handleAountBlur = () => {
      if (add_from.carbonAmount > usableCarbon.value) {
        ElMessage.error("输入的碳量不大于可用碳量");
        return;
      }
    };
    const handleSaveEntrust = () => {
      context.emit("handleSaveEntrust", add_from.carbonAmount);
    };
    const handleclose = () => {
      entrustVisible.value = false;
      context.emit("handleclose", entrustVisible.value);
    };
    return {
      add_from,
      title,
      entrustVisible,
      usableCarbon,
      handleAountBlur,
      handleSaveEntrust,
      handleclose,
    };
  },
};
</script>